<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>tail log</title>
<script src="//cdn.bootcss.com/jquery/2.1.4/jquery.js"></script>
</head>
<body>
	<div id="log-container" style="height: 650px; overflow-y: scroll; background: #333; color: #aaa; padding: 10px;">
		<div>
		</div>
	</div>
</body>
<script>
function encoder(s) {
	if(!s) return;
	
	let arr = s.split('#');
	if(arr.length < 3) {
		console.warn("消息格式不一致.");
		return;
	}
	
	console.info("协议ID:[%s], 加密类型:[%s], 内容:[%s]", arr[0], arr[1], arr[2]);
	return arr[2];
}

function decoder(s) {
	return "1000#0#" + s;
}

var websocket = null;
function start() {
	websocket = new WebSocket('ws://'+ location.hostname +':8865');
	websocket.onopen = function(evt) {
        _websocket = this;
        _websocket.send(decoder('["rest-info"]'));
    };

    websocket.onmessage = function(evt) {
        var str = encoder(evt.data);
        $("#log-container div").append(str);
		$("#log-container").scrollTop($("#log-container div").height() - $("#log-container").height());
    };

    websocket.onerror = function(evt) {
       console.error("error");
    };

    websocket.onclose = function(evt) {
    	console.error("colse");
    };
}
function stop(){
	websocket || websocket.colse();
	websocket = null;
}
$(document).ready(function() {
	start();
});
</script>
</body>
</html>